<template>
  <div class="statistics-container">
    <el-card class="statistics-card">
      <template #header>
        <div class="card-header">
          <span>数据统计</span>
        </div>
      </template>

      <!-- 统计概览 -->
      <el-row :gutter="20" class="stats-overview">
        <el-col :span="6">
          <div class="stat-card todo-card">
            <div class="stat-title">已接订单</div>
            <div class="stat-number">{{ statsData.acceptedOrders }}</div>
          </div>
        </el-col>
        <el-col :span="6">
          <div class="stat-card data-card">
            <div class="stat-title">配送中订单</div>
            <div class="stat-number">{{ statsData.deliveringOrders }}</div>
          </div>
        </el-col>
        <el-col :span="6">
          <div class="stat-card">
            <div class="stat-title">已完成订单</div>
            <div class="stat-number">{{ statsData.completedOrders }}</div>
          </div>
        </el-col>
        <el-col :span="6">
          <div class="stat-card">
            <div class="stat-title">今日收入(元)</div>
            <div class="stat-number">{{ statsData.todayIncome }}</div>
          </div>
        </el-col>
      </el-row>

      <!-- 详细统计 -->
      <el-row :gutter="20" class="details-section">
        <el-col :span="12">
          <el-card class="detail-card">
            <template #header>
              <div class="card-header">
                <span>商户订单统计</span>
              </div>
            </template>
            <el-table :data="merchantStats" style="width: 100%">
              <el-table-column prop="merchantName" label="商户名称" />
              <el-table-column prop="orderCount" label="订单数量" />
              <el-table-column prop="income" label="收入(元)" />
            </el-table>
          </el-card>
        </el-col>
        <el-col :span="12">
          <el-card class="detail-card">
            <template #header>
              <div class="card-header">
                <span>配送员统计</span>
              </div>
            </template>
            <el-table :data="deliveryStats" style="width: 100%">
              <el-table-column prop="deliveryName" label="配送员" />
              <el-table-column prop="orderCount" label="配送订单数" />
              <el-table-column prop="rating" label="评分" />
            </el-table>
          </el-card>
        </el-col>
      </el-row>
    </el-card>
  </div>
</template>

<script setup>
import { ref } from 'vue'

// 统计数据
const statsData = ref({
  acceptedOrders: 128,
  deliveringOrders: 24,
  completedOrders: 1024,
  todayIncome: 8642.50
})

// 商户统计
const merchantStats = ref([
  { merchantName: '肯德基', orderCount: 45, income: 1200.00 },
  { merchantName: '麦当劳', orderCount: 38, income: 980.00 },
  { merchantName: '必胜客', orderCount: 32, income: 1560.00 },
  { merchantName: '汉堡王', orderCount: 28, income: 860.00 },
  { merchantName: '星巴克', orderCount: 22, income: 680.00 }
])

// 配送员统计
const deliveryStats = ref([
  { deliveryName: '张三', orderCount: 65, rating: 4.8 },
  { deliveryName: '李四', orderCount: 52, rating: 4.6 },
  { deliveryName: '王五', orderCount: 48, rating: 4.9 },
  { deliveryName: '赵六', orderCount: 39, rating: 4.5 },
  { deliveryName: '钱七', orderCount: 32, rating: 4.7 }
])
</script>

<style scoped lang="scss">
.statistics-container {
  padding: 20px;
  background-color: #f0f2f5;
  height: 100%;
  box-sizing: border-box;

  .statistics-card {
    height: 100%;
  }

  .card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .stats-overview {
    margin-bottom: 30px;

    .stat-card {
      margin-bottom: 20px;
      border-radius: 8px;
      box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
      padding: 20px;
      background-color: #fff;
      text-align: center;

      .stat-title {
        font-size: 14px;
        color: #606266;
        margin-bottom: 10px;
      }

      .stat-number {
        font-size: 24px;
        font-weight: bold;
      }
    }

    .todo-card {
      .stat-number {
        color: #409eff;
      }
    }

    .data-card {
      .stat-number {
        color: #67c23a;
      }
    }
  }

  .details-section {
    .detail-card {
      margin-bottom: 20px;

      .card-header {
        font-weight: bold;
      }
    }
  }
}
</style>